<template>
  <div>
    <el-tag
      v-for="tag in tags"
      :key="tag[keyField]"
    >
      {{ tag[valueField] }}
    </el-tag>
    <el-tooltip v-if="errorSign" class="right" effect="dark" :content="message" placement="top">
      <div>
        <i class="el-icon-warning" style="color:red;line-height:32px;" />
      </div>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'IkTableSelectTag',
  props: {
    value: {
      type: String,
      default: ''
    },
    keyField: {
      type: String,
      default: ''
    },
    valueField: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default: function() {
        return []
      }
    },
    defaultValue: {
      type: String,
      default: ''
    },
    errorSign: {
      type: Boolean,
      default: false
    },
    message: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      val: []
    }
  },
  computed: {
    tags: function() {
      const $this = this
      const tagsArray = []
      for (const item in $this.options) {
        // 如果存在取值，设置取值
        if ($this.val === $this.options[item][$this.keyField]) {
          tagsArray.push($this.options[item])
        }
      }
      return tagsArray
    }
  },
  watch: {
    value: {
      handler(value, oldValue) {
        if (value !== null && value !== '' && value !== undefined) {
          this.val = value
        } else {
          this.val = this.defaultValue
          this.$emit('change', this.defaultValue)
        }
        this.$emit('onFieldChange', this.line, this.code, oldValue, value)
      },
      immediate: true
    }
  },
  // 如果value为空，取默认值
  created() {
  },
  methods: {
  }
}
</script>

<style lang="scss" >
.el-tag{
  margin-left: 10px;
}
</style>
